<!-- 供应商信息 -->
<template>
  <div class="app-container">
    <div class="cardBox">
      <leftTree
        ref="leftTree"
        :data="treeData"
        node-key="id"
        :default-props="defaultProps"
        search-key="typeName"
        width="200px"
        :default-expand-keys="defaultExpandKeys"
        :defalut-expand-all="true"
        @handleNodeClickAll="handleNodeClick"
      />
      <el-col id="right-content" class="right-content" :offset="0" :span="18">
        <div class="box-title">
          <el-breadcrumb separator="/" style="line-height: 50px">
            <el-breadcrumb-item
              v-for="(item, index) in breadcrumb"
              :key="index"
              >{{ item }}</el-breadcrumb-item
            >
          </el-breadcrumb>
        </div>
        <div class="search-and-button">
          <el-input
            v-model="search.keyword"
            placeholder="请输入关键字进行搜索"
            clearable
            @keyup.enter.native="getTableInfo()"
            @clear="getTableInfo()"
          >
            <el-button
              slot="append"
              icon="el-icon-search"
              @click="getTableInfo()"
            />
          </el-input>
          <div class="btnList">
            <el-button type="primary" icon="el-icon-plus" @click="showDialog"
              >新建</el-button
            >
            <ImportFile
              url="/basic/supplier/import"
              @getTableInfo="getTableInfo"
            />
            <el-button
              type
              icon="el-icon-refresh-left"
              @click="$router.push('/reload')"
              >刷新</el-button
            >
            <el-button type icon="el-icon-more">更多</el-button>
          </div>
        </div>
        <el-row class="table">
          <el-table
            ref="tableData"
            v-loading="loading"
            :data="tableData"
            stripe
            border
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection" align="center"></el-table-column>
            <el-table-column
              align="center"
              type="index"
              label="索引"
              width="60px"
            />
            <el-table-column
              prop="typeName"
              align="center"
              label="分类"
              width="100px"
            />
            <el-table-column prop="theme" align="center" label="主题" />
            <el-table-column
              prop="sort"
              align="center"
              label="排序"
              width="100px"
            />
            <el-table-column
              prop="userName"
              align="center"
              label="登记人"
              width="100px"
            />
            <el-table-column
              prop="registerTime"
              align="center"
              label="登记时间"
              width="180px"
            />
            <el-table-column
              label="操作"
              fixed="right"
              align="center"
              width="180px"
            >
              <template #default="{ row }">
                <el-button-group>
                  <!-- <el-button type="text" @click="showDialog(row)">
                    <i class="iconfont icon-search"></i>
                  </el-button> -->
                  <el-button
                    type="primary"
                    icon="el-icon-edit"
                    @click="showDialog(row)"
                  ></el-button>
                  <el-button
                    type="success"
                    icon="el-icon-share"
                    @click="showDrawer(row)"
                  ></el-button>
                  <el-button
                    type="danger"
                    icon="el-icon-delete"
                    @click="deleteRow(row)"
                  ></el-button>
                </el-button-group>
              </template>
            </el-table-column>
          </el-table>
        </el-row>
        <el-row>
          <div class="table-btn-box">
            <el-button
              @click="
                () => {
                  tableData.forEach((row) => {
                    $refs['tableData'].toggleRowSelection(row, true);
                  });
                }
              "
              >选择全部</el-button
            >
            <el-button
              @click="
                () => {
                  tableData.forEach((row) => {
                    $refs['tableData'].toggleRowSelection(row);
                  });
                }
              "
              >反向选择</el-button
            >
            <el-button>
              更多菜单
              <i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
          </div>
          <pagination
            ref="Pagination"
            :total="total"
            :current.sync="search.current"
            :size.sync="search.size"
            @pagination="getTableInfo"
          />
        </el-row>
      </el-col>
    </div>

    <!-- 新增编辑 -->
    <addAndModify
      ref="addAndModify"
      @getTableInfo="getTableInfo"
      @getTreeData="getTreeData"
      :receivedData="treeData"
    />

    <!-- 答案-->
    <AnswerList
      ref="AnswerList"
      @getTableInfo="getTableInfo"
      :receivedData="treeData"
    />
  </div>
</template>
<script>
import ImportFile from "@/components/ImportFile";
import Pagination from "@/components/Pagination";
import addAndModify from "./components/index";
import AnswerList from "./components/AnswerList";
import leftTree from "@/components/LeftTree";
import { mapGetters } from "vuex";
export default {
  components: {
    leftTree,
    Pagination,
    ImportFile,
    addAndModify,
    AnswerList,
  },
  data() {
    return {
      treeData: [],
      defaultProps: {
        children: "children",
        label: "typeName",
      },
      defaultExpandKeys: ["-1"],
      breadcrumb: ["星级上云"],
      loading: false,
      tableData: [],
      multipleSelection: [],
      total: 0,
      search: {
        current: 1,
        size: 20,
        keyword: "",
        treeStr: "-1",
      },
    };
  },
  computed: {
    ...mapGetters(["compInfo"]),
  },
  created() {},
  mounted() {
    this.getTableInfo();
    this.getTreeData();
  },
  methods: {
    /**
     * @description: page
     * @param {*} page
     * @return {*}
     */
    async getTableInfo(page = 1) {
      this.search.current = page;
      this.loading = true;
      const res = await this.$axios.post("/data/register/list", this.search);
      if (res?.data.code === 200) {
        this.tableData = res.data.data.list;
        this.total = res.data.data.total;
        setTimeout(() => {
          this.loading = false;
        }, 100);
      } else {
        this.loading = false;
      }
    },

    async getTreeData(page = 1) {
      this.search.current = page;
      this.loading = true;
      const res = await this.$axios.get("/data/type/list");
      if (res?.data.code === 200) {
        this.treeData = [
          { id: "-1", typeName: "星级上云", children: res.data.data },
        ];
      } else {
        this.loading = false;
      }
    },
    /**
     * @description: 新增编辑
     * @return {*}
     */
    async showDialog(row) {
      if (row && row.hasOwnProperty("id")) {
        this.title = "编辑";
        const res = await this.$axios.get(`/data/register/detail?id=${row.id}`);
        // console.log(res.data.data.hasOwnProperty("id"));
        if (res.data.data) {
          this.$set(row, "relevanceList", res.data.data); // 使用 Vue.set 确保响应性
          console.log(res.data.data);
        } else {
          this.$notify.warning("接口数据异常！");
        }
      }
      this.$refs["addAndModify"].showDialog(row);
    },
    /**
     * @description: 答案列表
     * @return {*}
     */
    async showDrawer(row) {
      this.$refs["AnswerList"].showDrawer(row);
    },
    /**
     * @description: 删除当前行数据
     * @param {*} row
     * @return {*}
     */
    deleteRow(row) {
      this.$confirm(`确认删除【${row.theme}】？`, "提示", {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          const res = await this.$axios.delete(
            `/data/register/remove/${row.id}`
          );
          if (res.data.code === 200) {
            this.$notify.success("删除成功！");
            this.getTableInfo();
          } else {
            this.$notify.error(res.data.msg);
          }
        })
        .catch(() => {});
    },
    /**
     * @description: 树节点点击
     * @param {*} data
     * @param {*} node
     * @return {*}
     */
    handleNodeClick({ data, node }) {
      this.breadcrumb = [];
      this.returnNodeLabel(node.parent);
      this.breadcrumb.push(data.typeName);
      this.search.treeStr = data.typeName === "星级上云" ? "-1" : data.id;
      this.getTableInfo();
    },
    /**
     * @description: 递归获取名称
     * @param {*} node
     * @return {*}
     */
    returnNodeLabel(node) {
      if (node.parent) {
        this.breadcrumb.unshift(node.data.typeName);
        this.returnNodeLabel(node.parent);
      }
    },
    /**
     * @description: 选中项
     * @param {*} val
     * @return {*}
     */
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
  },
};
</script>
<style lang="scss" scoped>
.search-and-button {
  line-height: 30px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  .el-input {
    width: 350px;
  }
}
.table {
  margin-top: 20px;
}
</style>
